<!-- 饼图：代理的几家城市， 柱状图:代理其中一家城市的医院 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>统计图（简）</title>
    <script type="text/javascript" src="__PRIVATE__/js/echarts.min.js"></script>
    <script type="text/javascript" src="__PRIVATE__/js/jquery-1.8.3.min.js"></script>
    <!-- <script type="text/javascript" src="../../Private/js/echarts.min.js"></script> -->
    <!-- <script type="text/javascript" src="../../Private/js/jquery-1.8.3.min.js"></script> -->
</head>

<body>
	<select name="date" id="selDate">
         <option value="7">过去7天</option>
         <option value="30">过去30天</option>
    </select>
    <select name="city" id="selCity">
         <foreach  name="citylist" item="vo">
               <option value="{$vo['cityid']}">{$vo['cityname']}</option>
         </foreach>
    </select>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div style="margin: 100px;">
        <div style="float: left;width:100%;">
            <div id="pie" style="width: 50%;height:400px;float:left;"></div>
            <div id="pie2" style="width: 50%;height:400px;float:left;"></div>
        </div>
        <div style="float: right;width:100%;">
            <div id="bar2" style="width:100%;height:400px;"></div>
            <div id="bar" style="width:100%;height:400px;"></div>
        </div>
    </div>

</body>
</html>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart_pie = echarts.init(document.getElementById('pie'));
    var myChart_pie2 = echarts.init(document.getElementById('pie2'));
    var myChart_bar = echarts.init(document.getElementById('bar'));
    var myChart_bar2 = echarts.init(document.getElementById('bar2'));
    // 【饼图】的配置项和数据
    var pie = {
        aria: {
            show: true
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            top: 'middle',
            bottom: 5,
            left: 'left',
            data:{$cityNameList}
            // data: ['亳州', '深圳','珠海','大连']
        },
        title: {
            text: '城市分娩比例图',
            x: 'center'
        },
        series: [
            {
                name: '城市',
                type: 'pie',
                data: {$cityBronList},
                // data: [
                //     { value: 335, name: '亳州' },
                //     { value: 160, name: '深圳' },
                //     { value: 134, name: '珠海市' },
                //     { value: 135, name: '江门市' }
                // ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    var pie2 = {
        aria: {
            show: true
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            top: 'middle',
            bottom: 5,
            left: 'left',
            data:{$cityOrderNameList}
            // data: ['亳州', '深圳','珠海','大连']
        },
        title: {
            text: '城市订单比例图',
            x: 'center'
        },
        series: [
            {
                name: '城市',
                type: 'pie',
                data: {$cityOrderNumList},
                // data: [
                //     { value: 335, name: '亳州' },
                //     { value: 160, name: '深圳' },
                //     { value: 134, name: '珠海' },
                //     { value: 135, name: '大连' }
                // ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    //柱状图 -- 某城市下的所有医院
    var bar = {
        title: {
            text: '代理城市所有医院订单量'
        },
        tooltip: {},
        //1. json数据中的图例
        legend: {
            data:{$cityName}
            // data:['亳州市']
        },
        //2. json数据中的横坐标
        xAxis: {
            // data: ["蒙城县妇女儿童医院","妇幼保健院","第三人民医院","庄周医院","兴华医院"]
            data: {$cityToHopitalName}
        },
        yAxis: {},
        series: [{
            name: "{$cityNameString}",
            // name: '亳州市',
            type: 'bar',
            //3. json数据中的显示数据
            // data: [5, 20, 36, 10, 10]
            data: {$cityToHopitalOrderNum}
        }]
    };

     var bar2 = {
    		 title: {
    	            text: '代理城市所有医院分娩量'
    	        },
    	        tooltip: {},
    	        //1. json数据中的图例
    	        legend: {
    	            data:{$hospitalToCityName}
    	            // data:['亳州市']
    	        },
    	        //2. json数据中的横坐标
    	        xAxis: {
    	            // data: ["蒙城县妇女儿童医院","妇幼保健院","第三人民医院","庄周医院","兴华医院"]
    	            data: {$hospitalName}
    	        },
    	        yAxis: {},
    	        series: [{
    	            name: "{$hospitalNameString}",
    	            // name: '亳州市',
    	            type: 'bar',
    	            //3. json数据中的显示数据
    	            // data: [5, 20, 36, 10, 10]
    	            data: {$hospitalDelNum}
    	        }]
     };

    // 使用刚指定的配置项和数据显示图表。
    myChart_pie.setOption(pie);
    myChart_pie2.setOption(pie2);
    myChart_bar.setOption(bar);
    myChart_bar2.setOption(bar2);
    

    //过去天数
    $("#selDate").change(function() {
        var last_day = $(this).val();
        var city_id = $('#selCity').val();
        var postData = {
        	city_id : city_id,
            last_day: last_day
        };
        $.ajax({
            url:"{:U(MODULE_NAME.'/'.CONTROLLER_NAME.'/getCartoForDate')}",
            type: 'post',
            dataType: 'json',
            data: postData,
            success:function(data){
            	if(data.status){
            		/**************城市分娩量饼图************/
            		myChart_pie.showLoading();
            		var newPie = myChart_pie.getOption();
            	    newPie = {
            	    	legend: {
            		        data:data.cityNameList
            	    	},
            	    	series: [
            	    	            {
            	    	                data: data.cityBronList,
            	    	            }
            	    	        ]
            	    }
            	    myChart_pie.setOption(newPie);
            	    myChart_pie.hideLoading();
            	    /**************城市分娩量饼图************/
            	    /**************城市订单量饼图************/
            	    myChart_pie2.showLoading();
            		var newPie2 = myChart_pie2.getOption();
            	    newPie = {
            	    	legend: {
            		        data:data.cityOrderNameList
            	    	},
            	    	series: [
            	    	            {
            	    	                data: data.cityOrderNumList,
            	    	            }
            	    	        ]
            	    }
            	    myChart_pie2.setOption(newPie);
            	    myChart_pie2.hideLoading();
            	    /**************城市订单量饼图************/
            	    
            	    /**************城市-医院订单量柱状图************/
            	    var newBar = myChart_bar.getOption();
                    newBar = {
            	            //1. json数据中的图例
            	            legend: {
            	                data:data.cityName
            	                // data:['亳州市']
            	            },
            	            //2. json数据中的横坐标
            	            xAxis: {
            	                data: data.hospitalName
            	            },
            	            series: [{
            	                name: data.cityNameString,
            	                type: 'bar',
            	                //3. json数据中的显示数据
            	                data: data.cityToHopitalOrderNum
            	            }]
            	        };
                    
                    myChart_bar.setOption(newBar);
            	    myChart_bar.hideLoading();
            	    /**************城市-医院订单量柱状图************/
            	    /**************城市-医院分娩量柱状图************/
            	    var newBar2 = myChart_bar2.getOption();
                    newBar2 = {
            	            //1. json数据中的图例
            	            legend: {
            	                data:data.hospitalToCityName
            	                // data:['亳州市']
            	            },
            	            //2. json数据中的横坐标
            	            xAxis: {
            	                data: data.cityToHopitalName
            	            },
            	            series: [{
            	                name: data.hospitalNameString,
            	                type: 'bar',
            	                //3. json数据中的显示数据
            	                data: data.hospitalDelNum
            	            }]
            	        };
                    
                    myChart_bar2.setOption(newBar2);
            	    myChart_bar2.hideLoading();
            	    /**************城市-医院分娩量柱状图************/
            	}
            }
          });
    });

    //选择代理城市，展示对应的城市柱状图
    $("#selCity").change(function() {
        var city_id = $(this).val();
        var last_day = $('#selDate').val();
        var postData = {
        	city_id : city_id,
            last_day: last_day
        };
        $.ajax({
            url:"{:U(MODULE_NAME.'/'.CONTROLLER_NAME.'/getCartoForDate')}",
            type: 'post',
            dataType: 'json',
            data: postData,
            success:function(data){
            	if(data.status){
            	    /**************城市-医院订单量柱状图************/
            	    var newBar = myChart_bar.getOption();
                    newBar = {
            	            //1. json数据中的图例
            	            legend: {
            	                data:data.cityName
            	                // data:['亳州市']
            	            },
            	            //2. json数据中的横坐标
            	            xAxis: {
            	                data: data.hospitalName
            	            },
            	            series: [{
            	                name: data.cityNameString,
            	                type: 'bar',
            	                //3. json数据中的显示数据
            	                data: data.cityToHopitalOrderNum
            	            }]
            	        };
                    
                    myChart_bar.setOption(newBar);
            	    myChart_bar.hideLoading();
            	    /**************城市-医院订单量柱状图************/
            	    /**************城市-医院分娩量柱状图************/
            	    var newBar2 = myChart_bar2.getOption();
                    newBar2 = {
            	            //1. json数据中的图例
            	            legend: {
            	                data:data.hospitalToCityName
            	                // data:['亳州市']
            	            },
            	            //2. json数据中的横坐标
            	            xAxis: {
            	                data: data.cityToHopitalName
            	            },
            	            series: [{
            	                name: data.hospitalNameString,
            	                type: 'bar',
            	                //3. json数据中的显示数据
            	                data: data.hospitalDelNum
            	            }]
            	        };
                    
                    myChart_bar2.setOption(newBar2);
            	    myChart_bar2.hideLoading();
            	    /**************城市-医院分娩量柱状图************/
            	}
            }
          });
    });
    
</script>

